<template>
  <div class="container">
    <el-tree v-if="showName === 'departmentName'" :node-key="'goalExecuteDepartment'" ref="organizationTree" :data="organizationList" :props="props" :highlight-current="true" :expand-on-click-node="false"@node-click="handleNodeClick" style="background-color: #F4F4F4"></el-tree>
    <el-tree :node-key="'goalExecuteDepartment'" ref="organizationTree" v-else :data="organizationList" :props="props2" :highlight-current="true" :expand-on-click-node="false" @node-click="handleNodeClick" style="background-color: #F4F4F4"></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      organizationList: [],
      props: {
        children: 'children',
        label: 'departmentName'
      },
      props2: {
        children: 'children',
        label: function(data, node) {
          return data.departmentPrincipalName ? data.departmentName + '（' + data.departmentPrincipalName + '）' : data.departmentName
        }
      },
      curOrganization: {}
    };
  },
  props: ["showName"],
  async mounted () {
    await this.getOrganization()
  },
  methods: {
    async getOrganization() {
      let list = await this.$httpN.postB('lkr/organization/organization')
      this.organizationList = this.treeData(list)
    },
    treeData(list) {
      return list.filter(father=>{
        let branchArr = list.filter(child=>father.id === child.departmentBelongId)    //返回每一项的子级数组
        branchArr.length>0 ? father.children = branchArr : ''   //如果存在子级，则给父级添加一个children属性，并赋值
        return father.departmentLevel === '1';      //返回第一层
      })
    },
    handleNodeClick(data) {
      this.curOrganization = data;
      this.$emit("curOrganization", data);
    },
    refresh() {
      this.$refs.organizationTree.setCurrentKey(null)
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  /deep/.el-tree-node__content {
    height: 40px;
  }
  /deep/.el-tree-node__content:hover, /deep/.is-current >.el-tree-node__content{
    background-color: #E8EEF6;
    color: #3296FA;
  }
}
</style>